<template>
	<!-- 
	1.具备输入框样式
	2.不可输入
	3.placeholder 内容可以在父组件中定义
	 -->
	<view class="search-container">
		<!-- 搜索图标 -->
		<image class="icon" src="@/static/images/search.png"></image>
		<text class="placeholder">{{placeholderText}}</text>
	</view>
</template>

<script>
	export default {
		props:{
			placeholderText:{
				type:String,
				default:"搜索"
			}
		},
		name:"my-search",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.search-container{
		// width: 100%;
		height: 30px;
		border:1px solid $uni-border-3;
		border-radius: 15px;
		backface-visibility: $uni-border-1;
		display: flex;
		align-items: center;
		padding: 0 $uni-spacing-row-base;
		
		.icon{
			width: $uni-spacing-base;
			height: $uni-spacing-base;
			margin-right: 3px;
		}
		.placeholder{
			font-size: $uni-spacing-base;
			color: $uni-extra-color;
		}
	}

</style>